<template>
	<view class="viewport">
		<!-- 搜索框 -->
		<view class="top">
			<view class="search">
				<navigator url="/pages/mall/mall-search/mall-search">
					<uni-easyinput prefixIcon="search" placeholder="请输入内容"></uni-easyinput>
				</navigator>
			</view>
			<!-- 购物车 -->
			<view class="cart">
				<navigator url="/pages/mall/mall-shopcart/mall-shopcart">
					<view class="icon-gouwuchekong" style="color: #61c84a; font-size: 60rpx">
					</view>
				</navigator>
			</view>
		</view>
		<!-- 分类 -->
		<view class="categories">
			<!-- 左侧：一级分类 -->
			<scroll-view class="primary" scroll-y>
				<view v-for="(item,index) in list" :key="index" class="item" :class="{ active: index === activeIndex }"
					@tap="changekind(index)">
					<text class="name">
						{{ item }}
					</text>
				</view>
			</scroll-view>
			<!-- 右侧：二级分类 -->
			<scroll-view enable-back-to-top class="secondary" scroll-y>
				<!-- 内容区域 -->
				<view class="section">
					<view v-for="item in goods" :key="item.goodsId" @click="toGood(item.goodsId)" class="goods"
						hover-class="none">
						<image class="image" :src="item.goodsImage"></image>
						<view class="name ellipsis">{{ item.goodsName }}</view>
						<view class="price">
							<text class="symbol">¥</text>
							<text class="number">{{item.goodsPrice }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				activeIndex: 0,
				list: [
					"绿茶",
					"红茶",
					"乌龙茶",
					"白茶",
					"黄茶",
					"黑茶",
				],
				goods: [],
			};
		},

		methods: {
			...mapMutations('user', ['get_user_shopping_cart', 'get_addressList']),

			changekind(n) {
				this.activeIndex = n
				uni.request({
					url: 'http://localhost:3000/course/goods',
					method: 'get',
					data: {
						type: this.list[this.activeIndex]
					},
					success: (res) => {
						this.goods = res.data
						// console.log("res:", res)
					},
				});
			},
			toGood(e) {
				uni.navigateTo({
					url: `/pages/mall/mall-goods-detail/mall-goods-detail?id=${e}`,
				});
			},
		},
		computed: {
			...mapState('user', ['user', 'user_shopping_cart'])
		},
		created() {
			if (!this.goods.length) {
				this.get_addressList(this.user.userId) //获得地址数据
				this.get_user_shopping_cart(this.user.userId) //获取购物车数据
				//获得初始的类型商品
				uni.request({
					url: 'http://localhost:3000/course/goods',
					method: 'get',
					data: {
						type: this.list[this.activeIndex]
					},
					success: (res) => {
						this.goods = res.data
						// console.log("res:", res)
					},
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	@import url("@/static/iconfonts/font_4707707_dxq5cvd7l9/iconfont.css");
	@import "./styles/mall.scss";
</style>